/* The module for the background of the banner on the landing page */
.backdrop {
  position: relative;
}
.backdrop:before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      -183deg,
      hsla(var(--background) / 0.75) 0%,
      hsla(var(--background) / 0.95) 33%,
      hsl(var(--background)) 50%
    ),
    url('../../../assets/images/background_pattern.webp');
  background-size: cover;
  background-position-y: top;
  background-position-x: center;
  background-repeat: no-repeat;
  transform: scaleY(-1) !important;
}

@media (max-width: 3000px) {
  .backdrop:before {
    background-position-x: 50%;
    background-size: 3300px;
  }
}

@media (max-width: 2000px) {
  .backdrop:before {
    background-position-x: 50%;
    background-size: 2200px;
  }
}

@media (max-width: 1280px) {
  .backdrop:before {
    background-position-x: 50%;
    background-size: 1800px;
  }
}
@media (max-width: 768px) {
  .backdrop:before {
    background:
      linear-gradient(
        -183deg,
        hsla(var(--background) / 0.75) 0%,
        hsla(var(--background) / 0.95) 15%,
        hsl(var(--background)) 30%
      ),
      url('../../../assets/images/background_pattern.webp');
    background-size: 1800px;

    background-position-y: top;
    background-position-x: center;
    background-repeat: no-repeat;
    background-position-x: 60%;
  }
}
@media (max-width: 480px) {
  .backdrop:before {
    background-position-x: 70%;
  }
}
